HistoryMap.tsx ➔ HistoryMap - Code Metrics - FalkenDev/SparkRentals-Mobile-App - Measure and Improve Code Quality continuously with Scrutinizer

HistoryMap.tsx ➔ HistoryMap D
last analyzed 2023-01-12 17:40 UTC

↳ Parent: components/drawer/HistoryMap.tsx

Complexity

Conditions

Size

Total Lines	107
Code Lines	89

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
eloc	89
dl	0
loc	107
rs	4.5599
c	0
b	0
f	0
cc	10

How to fix Long Method Complexity

import { useState, useEffect } from 'react';
import { ScrollView, Image, Text, View, StyleSheet, StatusBar, Button, Pressable, Modal } from 'react-native';
import MapView, { Marker, Circle, Polygon } from 'react-native-maps';
import React from 'react';
import mapModel from '../../models/map';
import Icon from 'react-native-vector-icons/Octicons';


export default function HistoryMap({navigation, journey, modalVisible, setModalVisible}): any {
    const [startCoordinates, setStartCoordinates] = useState([]);
    const [endCoordinates, setEndCoordinates] = useState([]);
    const [journeyData, setJourneyData] = useState([]);
    const [startStop, setStartStop] = useState([]);
    
    useEffect(() => {
        function setCoordinates() {
            if (modalVisible) {
                setStartCoordinates(journey['startPosition']);
                setEndCoordinates(journey['endPosition']);
                setJourneyData(journey);
            }
            
        };

        setCoordinates();
    })


    function getDistance() {
        const travelDistance = mapModel.calcDistance(startCoordinates['latitude'], endCoordinates['longitude'], endCoordinates['latitude'], endCoordinates['longitude']);
        
        return travelDistance.toFixed(2).toString();
    }
    
    return (
        <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
            setModalVisible(!modalVisible)
        }}
        >
            <View style={styles.container}>
     
                <MapView
                    style={styles.map}
                    region={{
                        latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0,
                        longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0,
                        latitudeDelta: 0.03,
                        longitudeDelta: 0.03,
                    }}
                    userInterfaceStyle={'dark'}
                >

      
                <Marker
                title='Start'
                coordinate={{
                    latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0,
                    longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0
                }}
                />

          
                <Marker
                pinColor='blue'
                title='Stop'
                coordinate={{
                    latitude: endCoordinates['latitude']? endCoordinates['latitude'] : 0,
                    longitude: endCoordinates['longitude']? endCoordinates['longitude'] : 0
                }}
                />
                
                </MapView>

                <View style={styles.infoContainer}>
                <Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => setModalVisible(false)}>
                    <Icon 
                        name='arrow-left' 
                        size={25} 
                        color='black'
                    />
                </Pressable>
                    <View style={styles.info}>

                        <View style={styles.listInfo}>
                            <Text style={styles.infoTitle}>Journey started</Text>
                            <Text>{journeyData['date']}</Text>
                        </View>

                        <View style={styles.listInfo}>
                            <Text style={styles.infoTitle}>Information about the trip</Text>
                            <Text>{getDistance()} km / {journeyData['totalMin']} min </Text>

                            <Text> {journeyData['totalPrice']} kr</Text>
                        </View>

                        <View style={styles.listInfo}>
                            <Text style={styles.infoTitle}>ID</Text>
                            <Text>{journeyData['_id']}</Text>
                        </View>

                        <View style={styles.listInfo}>
                            <Text style={styles.infoTitle}>Vehicle</Text>
                            <Text>{journeyData['scooterName']}</Text>
                        </View>

                    </View>
                </View>
            </View>
        </Modal>

    )
}

const styles = StyleSheet.create({
    container: {
        // position: 'absolute',
        // flex: 1,
        height: '100%',
        alignItems: "center",
        width: '100%',
        backgroundColor: 'white'
    },

    map: {
        position: 'absolute',
        top: 0,
        left: 0,
        bottom: 0,
        right: 0,
        height: '55%'
    },
    
    shadowProp: {
        elevation: 5,
        shadowColor: 'black'
      },

    infoContainer: {
        height: '100%',
        // flex: 1,
        // backgroundColor: 'red',
        justifyContent: 'flex-end',
        width: '100%'
    },

    info: {
        height: '45%',
        width: '100%',
        backgroundColor: 'white',
        justifyContent: 'space-around',
        alignItems: 'center'
    },

    listInfo: {
        // backgroundColor: 'red',
        height: '20%',
        borderBottomWidth: 1,
        width: '90%',
        flexDirection: 'row',
        justifyContent: 'space-between'
        // marginBottom: 10
    },

    infoTitle: {
        fontWeight: '600',
    },

    backButton: {
        position: 'absolute',
        width: 40,
        height: 40, 
        left: 20,
        backgroundColor: 'white',
        top: 5,
        borderRadius: 25,
        borderWidth: 1,
        borderColor: 'gray',
        alignItems: 'center',
        justifyContent: 'center'
    },
});



1			import { useState, useEffect } from 'react';
2			import { ScrollView, Image, Text, View, StyleSheet, StatusBar, Button, Pressable, Modal } from 'react-native';
3			import MapView, { Marker, Circle, Polygon } from 'react-native-maps';
4			import React from 'react';
5			import mapModel from '../../models/map';
6			import Icon from 'react-native-vector-icons/Octicons';
7
8
9			export default function HistoryMap({navigation, journey, modalVisible, setModalVisible}): any {
10			const [startCoordinates, setStartCoordinates] = useState([]);
11			const [endCoordinates, setEndCoordinates] = useState([]);
12			const [journeyData, setJourneyData] = useState([]);
13			const [startStop, setStartStop] = useState([]);
14
15			useEffect(() => {
16			function setCoordinates() {
17			if (modalVisible) {
18			setStartCoordinates(journey['startPosition']);
19			setEndCoordinates(journey['endPosition']);
20			setJourneyData(journey);
21			}
22
23			};
24
25			setCoordinates();
26			})
27
28
29			function getDistance() {
30			const travelDistance = mapModel.calcDistance(startCoordinates['latitude'], endCoordinates['longitude'], endCoordinates['latitude'], endCoordinates['longitude']);
31
32			return travelDistance.toFixed(2).toString();
33			}
34
35			return (
36			<Modal
37			animationType="slide"
38			transparent={true}
39			visible={modalVisible}
40			onRequestClose={() => {
41			setModalVisible(!modalVisible)
42			}}
43			>
44			<View style={styles.container}>
45
46			<MapView
47			style={styles.map}
48			region={{
49			latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0,
50			longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0,
51			latitudeDelta: 0.03,
52			longitudeDelta: 0.03,
53			}}
54			userInterfaceStyle={'dark'}
55			>
56
57
58			<Marker
59			title='Start'
60			coordinate={{
61			latitude: startCoordinates['latitude']? startCoordinates['latitude'] : 0,
62			longitude: startCoordinates['longitude']? startCoordinates['longitude'] : 0
63			}}
64			/>
65
66
67			<Marker
68			pinColor='blue'
69			title='Stop'
70			coordinate={{
71			latitude: endCoordinates['latitude']? endCoordinates['latitude'] : 0,
72			longitude: endCoordinates['longitude']? endCoordinates['longitude'] : 0
73			}}
74			/>
75
76			</MapView>
77
78			<View style={styles.infoContainer}>
79			<Pressable style={[styles.backButton, styles.shadowProp]} onPress={() => setModalVisible(false)}>
80			<Icon
81			name='arrow-left'
82			size={25}
83			color='black'
84			/>
85			</Pressable>
86			<View style={styles.info}>
87
88			<View style={styles.listInfo}>
89			<Text style={styles.infoTitle}>Journey started</Text>
90			<Text>{journeyData['date']}</Text>
91			</View>
92
93			<View style={styles.listInfo}>
94			<Text style={styles.infoTitle}>Information about the trip</Text>
95			<Text>{getDistance()} km / {journeyData['totalMin']} min </Text>
96
97			<Text> {journeyData['totalPrice']} kr</Text>
98			</View>
99
100			<View style={styles.listInfo}>
101			<Text style={styles.infoTitle}>ID</Text>
102			<Text>{journeyData['_id']}</Text>
103			</View>
104
105			<View style={styles.listInfo}>
106			<Text style={styles.infoTitle}>Vehicle</Text>
107			<Text>{journeyData['scooterName']}</Text>
108			</View>
109
110			</View>
111			</View>
112			</View>
113			</Modal>
114
115			)
116			}
117
118			const styles = StyleSheet.create({
119			container: {
120			// position: 'absolute',
121			// flex: 1,
122			height: '100%',
123			alignItems: "center",
124			width: '100%',
125			backgroundColor: 'white'
126			},
127
128			map: {
129			position: 'absolute',
130			top: 0,
131			left: 0,
132			bottom: 0,
133			right: 0,
134			height: '55%'
135			},
136
137			shadowProp: {
138			elevation: 5,
139			shadowColor: 'black'
140			},
141
142			infoContainer: {
143			height: '100%',
144			// flex: 1,
145			// backgroundColor: 'red',
146			justifyContent: 'flex-end',
147			width: '100%'
148			},
149
150			info: {
151			height: '45%',
152			width: '100%',
153			backgroundColor: 'white',
154			justifyContent: 'space-around',
155			alignItems: 'center'
156			},
157
158			listInfo: {
159			// backgroundColor: 'red',
160			height: '20%',
161			borderBottomWidth: 1,
162			width: '90%',
163			flexDirection: 'row',
164			justifyContent: 'space-between'
165			// marginBottom: 10
166			},
167
168			infoTitle: {
169			fontWeight: '600',
170			},
171
172			backButton: {
173			position: 'absolute',
174			width: 40,
175			height: 40,
176			left: 20,
177			backgroundColor: 'white',
178			top: 5,
179			borderRadius: 25,
180			borderWidth: 1,
181			borderColor: 'gray',
182			alignItems: 'center',
183			justifyContent: 'center'
184			},
185			});
186
187

FalkenDev / SparkRentals-Mobile-App

HistoryMap.tsx ➔ HistoryMap D last analyzed 2023-01-12 17:40 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method Complexity

Long Method

Complexity

Duplication Side-by-Side

Filter issues like

HistoryMap.tsx ➔ HistoryMap D
last analyzed 2023-01-12 17:40 UTC